<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 新建流程 </button>
            </div>
        </script>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-upload" lay-event="deploy">部署</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-download" lay-event="export">导出</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<div id="showAdd" style="display: none">
    <form class="layui-form" action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">流程名称</label>
            <div class="layui-input-block">
                <input type="text" name="proName" required  lay-verify="required" placeholder="请输入流程名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">流程key</label>
            <div class="layui-input-block">
                <input type="text" name="proKey" required  lay-verify="required" placeholder="请输入流程key" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea name="proDesc" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="showAdd">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>
</div>


<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/common.js"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        table.render({
            elem: '#currentTableId',
            url: webUrl+'/modeler/listModeler',
            toolbar: '#toolbarDemo',
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            skin: 'line',
            page:true,
            cols: [[
                {field:'id',  title: '编号',width: 80,align:"center",templet:function (d) {
                        return d.LAY_TABLE_INDEX+1;
                    }},
                {field: 'key', width: 180, title: 'KEY', sort: true,align:"center"},
                {field: 'name', width: 180, title: '名称', sort: true,align:"center"},
                {field: 'version', width: 180, title: '版本',align:"center",},
                {field: 'createTime', width: 180, title: '创建时间', sort: true,align:"center",templet:function (d) {
                        return showTime(d.createTime);
                    }},
                {field: 'lastUpdateTime', width: 180, title: '最后更新时间', sort: true,align:"center",templet:function (d) {
                        return showTime(d.lastUpdateTime);
                    }},
                {field: 'metaInfo', width: 180, title: '元数据',align:"center"},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.rows //解析数据列表
                };
            }
        });

        /**
         * toolbar工具栏监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        title:'新建流程',
                        area: ['700px', '350px'], //自定义文本域宽高
                        content: $('#showAdd') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    break;
            }
        });

        //监听单元格事件
        table.on('tool(currentTableFilter)', function(obj){
            switch (obj.event) {
                case 'edit':
                    var index = layer.open({
                        title: '流程模型',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: '../../modeler.html?modelId='+obj.data.id
                    });
                    break;
                case 'deploy':
                    var data={
                        "modelId":obj.data.id
                    }
                    $.ajax({
                        type:"post",
                        dataType:"json",
                        url: webUrl+'/modeler/deployModeler',//url
                        contentType: "application/json; charset=utf-8",
                        data:JSON.stringify(data),
                        success: function (result) {
                            if (result.data.success == true) {
                                window.location.reload();
                            } else {
                                layer.msg("操作失败");
                            }
                        },
                        error: function () {
                            layer.msg("操作失败");
                        }

                    })
                    break;
                case 'export':
                    window.location.href=webUrl+'/modeler/export?modelId='+obj.data.id
                    break;
                case 'delete':
                    layer.confirm('是否删除？', {
                        btn: ['是', '否',],//可以无限个按钮
                    }, function(index, layero){
                        $.ajax({
                            type:"post",
                            dataType:"json",
                            url: webUrl+'/modeler/delete',//url
                            contentType: "application/json; charset=utf-8",
                            data:JSON.stringify({
                                'id':obj.data.id
                            }),
                            success: function (result) {
                                if (result.data.success == true) {
                                    layer.msg("操作成功");
                                    layer.close(index);
                                    //刷新父界面(当前页的弹窗不需要加parent)
                                    window.location.reload();
                                } else {
                                    layer.msg("操作失败");
                                }
                            },
                            error: function () {
                                layer.msg("操作失败");
                            }
                        })
                    });

                    break;
            }
        });


        //监听提交
        form.on('submit(showAdd)', function(data){
            $.ajax({
                type:"post",
                dataType:"json",
                url: webUrl+'/modeler/addModeler',//url
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify(data.field),
                success: function (result) {
                    if (result.data.success == true) {
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);

                        var index = layer.open({
                            title: '流程模型',
                            type: 2,
                            shade: 0.2,
                            maxmin:true,
                            shadeClose: true,
                            area: ['100%', '100%'],
                            content: '../../modeler.html?modelId='+result.data.modelId
                        });
                        $(window).on("resize", function () {
                            layer.full(index);
                        });
                    } else {
                        layer.msg("操作失败");
                    }
                },
                error: function () {
                    layer.msg("操作失败");
                }

            })
            return false;
        });


    });

    //时间转换函数
    function showTime(tempDate)
    {
        var d = new Date(tempDate);
        var year = d.getFullYear();
        var month = d.getMonth();
        month++;
        var day = d.getDate();
        var hours = d.getHours();

        var minutes = d.getMinutes();
        var seconds = d.getSeconds();
        month = month<10 ? "0"+month:month;
        day = day<10 ? "0"+day:day;
        hours = hours<10 ? "0"+hours:hours;
        minutes = minutes<10 ? "0"+minutes:minutes;
        seconds = seconds<10 ? "0"+seconds:seconds;


        var time = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
        return time;
    }
</script>
</body>
</html>